<template>
  <div class="tab">
    <van-tabs v-model="active" class="tab__tabs" line-height="0">
      <template v-slot:default>
        <van-tab title="订阅" name="subscribe" title-class="tab__tabs__left">
          <template v-slot:title>
            <div
              :class="[
                'tab__tabs__text',
                { 'tab__tabs__text--active': active === 'subscribe' },
              ]"
            >
              订阅
            </div>
          </template>
        </van-tab>

        <van-tab title="推荐" name="recommend" title-class="tab__tabs__right">
          <template v-slot:title>
            <div
              :class="[
                'tab__tabs__text',
                { 'tab__tabs__text--active': active === 'recommend' },
              ]"
            >
              推荐
            </div>
          </template>
          <template>
            <search-bar />
            <div
              class="tab__tabs__right__container"
              :style="{ height: containerH + 'px' }"
            >
              <slot />
            </div>
          </template>
        </van-tab>
      </template>

      <template v-slot:nav-left>
        <div class="tab__tabs__nav">
          <van-image
            class="tab__tabs__nav__img"
            src="https://fast-learn-oss.youbaobao.xyz/tb/hongbao.png"
          />
          <div class="tab__tabs__nav__text">签到</div>
        </div>
      </template>
      <template v-slot:nav-right>
        <div class="tab__tabs__nav">
          <van-image
            class="tab__tabs__nav__img"
            src="https://fast-learn-oss.youbaobao.xyz/tb/qrcode.png"
          />
          <div class="tab__tabs__nav__text">会员码</div>
        </div>
      </template>
    </van-tabs>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'

export default {
  components: {
    SearchBar
  },
  data() {
    return {
      active: 'recommend',
      containerH: 0
    }
  },
  mounted() {
    // 等待页面渲染完成后再执行代码
    this.$nextTick(() => {
      // 获取全局layout（用于查询整体页面高度）
      const layout = document.querySelector('.layout')
      // 获取tab (用于查询padding-top)
      // const tab = document.querySelector('.tab')
      // 获取van-tabs__wrap（用于查询tab高度）
      const tabWrapper = document.querySelector('.van-tabs__wrap')
      // 获取serachBar （查询外边距及高度）
      const searchBar = document.querySelector('.search-bar')
      // 获取bottom-bar (用于查询bottom高度及边距)
      const bottomBar = document.querySelector('.bottom-bar')

      // 页面高度
      const layoutH = layout.getBoundingClientRect().height

      // const tabH = tab.getBoundingClientRect().height
      // 获取页面中tab属性
      // const tabStyle = window.getComputedStyle(tab)
      // 获取页面中tab padding-top
      // const tabpaddingTop = +tabStyle.paddingTop.replace('px', '')
      // tab高度
      const tabH = tabWrapper.getBoundingClientRect().height

      // 搜索框高度
      const searchBarH = searchBar.getBoundingClientRect().height
      const searchBarStyle = window.getComputedStyle(searchBar)
      // 搜索框上边距
      const searchMarginTop = +searchBarStyle.marginTop.replace('px', '')
      // 下边距
      const searchMarginBottom = +searchBarStyle.marginBottom.replace('px', '')

      // bottom-bar 高度
      const bottomBarH = bottomBar.getBoundingClientRect().height

      // 计算container高度
      const containerH =
        layoutH -
        tabH -
        searchBarH -
        searchMarginTop -
        searchMarginBottom -
        bottomBarH

      this.containerH = containerH
    })
  }
}
</script>

<style lang="less">
.tab {
  // background-color: red;
  // box-sizing: border-box;
  // padding-top: 22px;
  // margin: 0 24px;
  &__tabs {
    &__left {
      justify-content: flex-end;
      margin-right: 26px;
    }

    &__right {
      justify-content: start;
      margin-right: 26px;
      &__container {
          background-color: red;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }

    &__text {
      height: 58px;
      line-height: 58px;
      font-size: 32px;
      color: #ffffff;
      &--active {
        font-size: 38px;
        color: #ffffff;
        font-weight: 500;
      }
    }

    &__nav {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 52px;
      padding: 4px 9px 4px 6px;
      margin: 0 24px;
      background-image: linear-gradient(180deg, #feede0 0%, #feece0 100%);
      box-shadow: 0 2px 4px 0 rgba(103, 0, 8, 0.15);
      border-radius: 26px;
      &__img {
        width: 44px;
        height: 44px;
      }

      &__text {
        margin-left: 7px;
        font-size: 22px;
        color: #ff5000;
        font-weight: 500;
      }
    }
  }
}

.van-tabs--line .van-tabs__wrap {
  height: auto;
  box-sizing: border-box;
  padding-top: 22px;
}

.van-tabs__nav--line {
  background-color: transparent;
}
</style>
